<template>
  <div class="w-full px-2">
    <div v-if="question_type == 'choice'">
      <div class="space-y-2">
        <div v-for="(ans, idx) in data">
          <div class="flex items-center space-x-4">
            <div class=" shrink-0">{{ ans.title }}{{ formatChar(idx) }}</div>
            <FyEditor class="grow" v-model="ans.value" />
            <div class=" shrink-0">
              <ElButton :icon="Delete" @click="delAnswer(idx)" type="danger" />
            </div>
          </div>
          <ElCheckbox v-model="ans.is_right">正确答案</ElCheckbox>
        </div>
      </div>
    </div>
    <div v-else-if="question_type == 'fill'">
      <div class="space-y-2">
        <div v-for="(ans, idx) in data">
          <div class="flex items-center space-x-4">
            <div class=" shrink-0">{{ ans.title }}{{ formatChar(idx) }}</div>
            <ElInput v-model="ans.value" />
            <div class=" shrink-0">
              <ElButton :icon="Delete" @click="delAnswer(idx)" type="danger" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="question_type == 'translate' || question_type == 'oral_interpretation'">
      <div class="space-y-2">
        <div v-for="(ans, idx) in data">
          <div class="flex items-center space-x-4">
            <div class=" shrink-0">{{ ans.title }}{{ formatChar(idx) }}</div>
            <ElInput v-model="ans.value" type="textarea" class="grow" />
            <div class=" shrink-0">
              <ElButton :icon="Delete" @click="delAnswer(idx)" type="danger" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="question_type == 'connect'">
      <div class="space-y-2">
        <div v-for="(ans, idx) in data">
          <div class="flex items-center space-x-4">
            <div class=" shrink-0">{{ ans.title }}{{ formatChar(idx) }}</div>
            <ElInput v-model="ans.value[0]" />
            <div class=" shrink-0">答案 {{ formatChar(idx) }}</div>
            <ElInput v-model="ans.value[1]" />
            <div class=" shrink-0">
              <ElButton :icon="Delete" @click="delAnswer(idx)" type="danger" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      {{ question_type }}
    </div>
    <ElButton class="mx-auto mt-4" @click="addAnswer">添加{{ title }}</ElButton>
  </div>
</template>

<script setup lang='ts'>
import { QuestionVo, question_types } from '@/modules/question/api/question';
import { Delete } from '@element-plus/icons-vue'
const $props = defineProps<{
  model?: QuestionVo
}>()
const question_type = computed(() => $props.model?.type)
const data = defineModel<any[]>({ default: [] })

const title = computed(() => {
  const prefixIdx = question_types.findIndex(t => t.code == question_type.value)
  return question_types[prefixIdx]?.item_name || '选项';
})
const formatChar = idx => question_type.value == 'choice' ? String.fromCharCode(97 + idx).toLocaleUpperCase() : idx + 1
const addAnswer = () => {
  const origin = JSON.parse(JSON.stringify(data.value));

  origin.push({
    title,
    value: question_type.value == 'connect' ? ['',''] : '',
    is_right: false
  })
  data.value = origin;
}

const delAnswer = (idx) => {
  const origin = JSON.parse(JSON.stringify(data.value));
  origin.splice(idx, 1)
  data.value = origin;
}
watch(question_type, () => {
  data.value = [];
})
watch(data, (v) => {
  console.log(v)
}, { deep: true })
</script>

<style></style>
